<template>
  <div id="bookmark">
    <div style="text-align: right">
      <el-button
        icon="el-icon-plus"
        size="small"
        type="primary"
        @click="addBookMark">添加书签
      </el-button>
    </div>
    <div style="position:relative;height:calc(100% - 53px)">
      <el-scrollbar class="page-component__scroll">
        <div v-for="(item,index) in bookmarks" :key="index" class="layer-arguments" @click="locateTo(item)">
          <div class="bookmark-item">
            <a class="kfb-icon-yingyong"/>
            <span>&nbsp;{{ item.name }}&nbsp;&nbsp;&nbsp;</span>
          </div>
          <a class="bookmarkEdit el-icon-delete" @click.stop="handleDelete(item)"/>
          <a class="bookmarkEdit el-icon-edit-outline" @click.stop="handleEdit(item)"/>
        </div>
      </el-scrollbar>
    </div>
    <!--添加书签-->
    <el-dialog
      :visible="dialogFormVisible"
      :close-on-click-modal="false"
      title="添加书签"
      width="400px"
      append-to-body
      @close="dialogFormVisible= false,isAdd = true">
      <el-form>
        <el-form-item label="书签名称" label-width="80px">
          <el-input
            ref="book_input"
            v-model="form.name"
            autocomplete="off"
            size="small"
            @keyup.enter.native="handleConfirm"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    add,
    remove,
    update,
    list
  } from '@/api/bookmark'
  import {
    mapState
  } from 'vuex'
  import Clone from '@/utils/clone'

  export default {
    name: 'BookMark',
    data() {
      return {
        bookmarks: [], // 书签数据
        dialogFormVisible: false,
        form: {
          name: ''
        },
        isAdd: false
      }
    },
    methods: {
      /**
       * 编辑书签
       * @param item
       */
      handleEdit(item) {
        this.form = Clone.clone(item)
        this.dialogFormVisible = true
        this.isAdd = false
      },

      /**
       * 添加书签
       */
      addBookMark() {
        this.isAdd = true
        this.dialogFormVisible = true
        this.$nextTick(function() {
          this.$refs['book_input'].focus()
        })
        const map = this.comparable.getMap()
        const sceneViewer = this.sceneViewer
        const mapModuleIndex = this.mapModuleIndex
        if (mapModuleIndex === 0) {
          const camera = {
            center: map.getCenter(),
            zoom: map.getZoom(),
            bear: map.getBearing(),
            pitch: map.getPitch()
          }
          this.form = {
            uid: this.$store.getters.id,
            camera: camera,
            type: 0,
            name: ''
          }
        } else if (mapModuleIndex === 1) {
          const camera = {
            position: sceneViewer.camera.positionCartographic,
            heading: sceneViewer.camera.heading,
            pitch: sceneViewer.camera.pitch,
            roll: sceneViewer.camera.roll
          }
          this.form = {
            uid: this.$store.getters.id,
            camera: camera,
            type: 1,
            name: ''
          }
        } else if (mapModuleIndex === 2) {
          const camera = {
            center: map.getCenter(),
            zoom: map.getZoom(),
            bear: map.getBearing(),
            pitch: map.getPitch()
          }
          this.form = {
            uid: this.$store.getters.id,
            camera: camera,
            type: 0,
            name: ''
          }
        }
      },
      /**
       * 书签定位
       * @param item
       */
      locateTo(item) {
        const mapModuleIndex = this.mapModuleIndex
        switch (mapModuleIndex) {
          case 0:
          case 2:
            // const map = this.mapService.getMap();
            const map = this.comparable.getMap()
            map.flyTo({
              center: item.camera.center,
              zoom: item.camera.zoom,
              bearing: item.camera.bear,
              pitch: item.camera.pitch,
              duration: 3000,
              speed: 0.2,
              curve: 1
            })
            break
          case 1:
            const lat = Cesium.Math.toDegrees(item.camera.position.latitude)
            const log = Cesium.Math.toDegrees(item.camera.position.longitude)
            const alt = item.camera.position.height
            this.sceneViewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(log, lat, alt),
              duration: 3,
              orientation: {
                heading: item.camera.heading,
                pitch: item.camera.pitch,
                roll: item.camera.roll
              }
            })
            break
        }
      },
      /**
       * 获取书签列表
       */
      getBookMarks() {
        const mapModuleIndex = this.mapModuleIndex
        switch (mapModuleIndex) {
          case 0:
            list({
              type: 0,
              uid: this.$store.getters.id
            }).then(res => {
              this.bookmarks = res.data
            })
            break
          case 1:
            list({
              type: 1,
              uid: this.$store.getters.id
            }).then(res => {
              this.bookmarks = res.data
            })
            break
          case 2:
            list({
              type: 0,
              uid: this.$store.getters.id
            }).then(res => {
              this.bookmarks = res.data
            })
            break
        }
      },
      /**
       * 提交
       */
      handleConfirm() {
        if (this.isAdd) {
          add(this.form).then(res => {
            this.bookmarks.push(res.data)
            this.dialogFormVisible = false
          })
        } else {
          update(this.form).then(res => {
            const index = this.bookmarks.findIndex(o => o._id === this.form._id)
            this.bookmarks.splice(index, 1, this.form)
            this.dialogFormVisible = false
          })
        }
      },
      /**
       * 删除书签
       * @param item
       */
      handleDelete(item) {
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            remove(item).then(res => {
              this.bookmarks.splice(this.bookmarks.indexOf(item), 1)
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      }
    },
    computed: {
      ...mapState({
        // 地图模块控件
        mapModuleIndex(state) {
          return state.eswyzt.mapModuleIndex
        },

        mapService(state) {
          return state.eswyzt.mapService
        },
        /**
         * 比较
         * @param state
         * @returns {comparable|(function(*))|*}
         */
        comparable: function(state) {
          return state.eswyzt.comparable
        },
        sceneViewer(state) {
          return state.eswyzt.sceneViewer
        }
      }),
      // 书签是否有数据
      hasData() {
        return this.bookmarks.length > 0
      }
    },
    mounted() {
      this.getBookMarks()
    }
  }
</script>

<style>
  .page-component__scroll {
    height: 100%;
  }

  .page-component__scroll .el-scrollbar__wrap {
    overflow-x: auto;
  }

  #bookmark .el-button:hover {
    border-color: #398f86ff;
    color: #398f86ff;
  }

  #bookmark .el-button {
    margin: 10px 20px 10px 10px;
    background-color: #ffffff00;
    color: white;
  }
</style>

<style scoped>
  #bookmark {
    height: 100%;
  }

  #bookmark .layer-arguments {
    margin: 10px 0;
    height: 44px;
    line-height: 44px;
    padding: 4px;
    cursor: pointer;
    color: #fff;
    font-size: 18px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
    padding: 1em;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center; /*垂直居中*/
  }

  #bookmark .layer-arguments:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
  }

  .bookmarkDel {
    float: right;
    color: #f44336;
    font-size: 17px;
  }

  .bookmark-item {
    flex: 1;
  }

  .bookmark-item a {
    font-size: 20px;
    color: red
  }

  .bookmarkEdit {
    color: #fff;
    font-size: 20px;
    margin: 0 4px;
  }

</style>
